{extend name="./template/default/m/pub/base2.html" /}
{block name="seo"}
<title>{$site_name}-{$cate}分类</title>
<meta name="description" content="{$site_name}{$cate}分类">
{/block}
{block name="main"}
<div class="x-page__content">
    <div class="x-book__library">
        <div class="x-library__category">
            <div class="x-category__box">
                <div class="x-category__box--title">分类</div>
                <div class="x-category__box--list">
                    <span class="x-category__item" :class="{'is-active' : cate == -1}">
                        <a @click="cateChange(-1)">全部</a>
                    </span>
                    {volist name="cates" id="vo"}
                    <span class="x-category__item" :class="{'is-active' : cate == {$vo.sortid}}">
                        <a @click="cateChange({$vo.sortid})">{$vo.cate_name}</a>
                    </span>
                    {/volist}
                </div>
            </div>

            <div class="x-category__box">
                <div class="x-category__box--title">状态</div>
                <div class="x-category__box--list">
                    <span class="x-category__item" :class="{'is-active' : fullflag == -1}">
                        <a @click="statusChange(-1)">全部</a>
                    </span>
                    <span class="x-category__item" :class="{'is-active' : fullflag == 0}">
                        <a @click="statusChange(0)">连载</a>
                    </span>
                    <span class="x-category__item" :class="{'is-active' : fullflag == 1}">
                        <a @click="statusChange(1)">完本</a>
                    </span>
                </div>
            </div>

            <div class="x-category__box" v-show="more">
                <div class="x-category__box--title">字数</div>
                <div class="x-category__box--list">
                    <span class="x-category__item" :class="{'is-active' : words == -1}">
                        <a @click="wordsChange(-1)">全部</a>
                    </span>
                    <span class="x-category__item" :class="{'is-active' : words == 30}">
                        <a @click="wordsChange(30)">30万字以内</a>
                    </span>
                    <span class="x-category__item" :class="{'is-active' : words == 50}">
                        <a @click="wordsChange(50)">50万字以内</a>
                    </span>
                    <span class="x-category__item" :class="{'is-active' : words == 100}">
                        <a @click="wordsChange(100)">100万字以内</a>
                    </span>
                    <span class="x-category__item" :class="{'is-active' : words == 200}">
                        <a @click="wordsChange(200)">200万字以内</a>
                    </span>
                </div>
            </div>
        </div>
        <div class="x-library__category--more" @click="showmore()">展开更多筛选项</div>
        <div class="x-library__books">
            <div class="van-list">
                <span>
                    {volist name="books" id="vo"}
                    <div class="x-book">
                        <div class="x-book__multi">
                            <div class="x-book__coverbox">
                                <a href="/m/{$book_ctrl}/{$vo.param}/" title="{$vo.articlename}">
                                    <img class="x-book__cover" src="{$server}{$vo.cover}" style="width: 1.6rem; height: 2.13333rem;">
                                </a>
                            </div>
                            <div class="x-book__text--multi" style="width: calc(100% - 1.6rem); height: 2.13333rem;">
                                <a href="/m/{$book_ctrl}/{$vo.param}/">
                                    <div class="x-book__info">
                                        <p class="x-book__info--name">{$vo.articlename}</p>
                                        <p class="x-book__info--chapter">
                                            {$vo.intro}
                                        </p>
                                        <p class="x-book__info--update">{$vo.cate.cate_name}</p>
                                        <p class="x-book__info--author">
                                            {$vo.author} <span>{$vo.words}字</span>
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </span>
            </div>
            <div class="pages_bottom" style="display: block;">
                <ul class="pager">
                    {if $page.last_page > 1}
                    {if $page.current_page == 1}
                    <li class="disabled"><span>«</span></li>
                    {else/}
                    <li><a href="/m/{$booklist_act}?page={$page.current_page-1}{$param}" title="上一页">«</a></li>
                    {/if}

                    {if $page.current_page == $page.last_page}
                    <li class="disabled"><span>»</span></li>
                    {else/}
                    <li><a href="/m/{$booklist_act}?page={$page.current_page+1}{$param}" title="下一页">»</a></li>
                    {/if}
                    {/if}
                </ul>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            cate: {$cate_selector},
            words: {$words_selector},
            fullflag: {$end_selector},
            more: false
        },
        methods: {
            wordsChange(words) {
                this.words = words
                window.location.href = '/m/{$booklist_act}?sortid='+this.cate+'&words='+this.words+'&fullflag='+this.fullflag;
            },
            cateChange(cate) {
                this.cate = cate
                window.location.href = '/m/{$booklist_act}?sortid='+this.cate+'&words='+this.words+'&fullflag='+this.fullflag;
            },
            statusChange(fullflag) {
                this.fullflag = fullflag
                window.location.href = '/m/{$booklist_act}?sortid='+this.cate+'&words='+this.words+'&fullflag='+this.fullflag;
            },
            showmore() {
                this.more = !this.more
            }
        },
    })
</script>

{/block}